import React, { useState, useEffect } from 'react';
import bg from '../../assets/bg.jpg'
import right from '../../assets/right.png'
import left from '../../assets/left.png'
import Header from '../../conponents/header';
import Footter from '../../conponents/footter'
import Service from '../../conponents/service';
import { useLocation } from 'react-router-dom';
import { Image } from 'antd'
import axios from 'axios'
import Login from '../../conponents/login';
import { useTranslation } from 'react-i18next';
import { BASE_URL } from '../../utils/request';


const Detail = () => {
  const { t } = useTranslation()

  const location = useLocation();
  const { id } = location.state
  const [currentIndex, setCurrentIndex] = useState(0);
  const [item, setItem] = useState({})
  const token = localStorage.getItem('token') || ''
  const [showLogin, setShowLogin] = useState(false);
  const onCloseLogin = (e) => {
    setShowLogin(e)
  }


  const getInfo = async () => {
    const url = '/system/hospital/' + id
    const res = await axios({
      url: BASE_URL + url,
      method: 'get',   // 默认值
      headers: {
        Authorization: token
      }
    })
    if (res.data.code === 200) {
      setItem(res.data.data)
    }
    if (res.data.code === 401) {
      setShowLogin(true)
    }
  }
  useEffect(() => {
    getInfo()
  }, [id])

  const showMedia = (index) => {
    setCurrentIndex(index);
  };

  const nextSlide = () => {
    setCurrentIndex((currentIndex + 1) % (item.photoFiles.length + 1));
  };

  const prevSlide = () => {
    setCurrentIndex((currentIndex - 1 + item.photoFiles.length + 1) % (item.photoFiles.length + 1));
  };

  return (
    <>
      <div style={{ backgroundImage: `url(${bg})` }} className='h-auto bg-no-repeat bg-cover pt-10 pb-32'>
        <Header />
      </div>
      <div className="bg-[#E3F2DF] font-sans p-5">
        <div className=" sm:w-[75%] w-full mx-auto bg-white p-5 rounded-lg shadow-md flex flex-wrap">
          {item?.photoFiles?.length > 0 && <div className="sm:w-[30%] h-[45%] text-center bg-gray-200 rounded-lg p-2 sm:mr-5 flex flex-col justify-between relative">
            <Image src={item.photoFiles[currentIndex]?.url} className='h-full w-full object-cover' alt="" />
            <div className="absolute top-1/2 left-0 w-full flex justify-between transform -translate-y-1/2">
              {currentIndex > 0 ?
                <img src={left} className="bg-black bg-opacity-50 text-white p-2 cursor-pointer rounded-full w-10 ml-3" onClick={prevSlide} />
                : <div></div>}
              {currentIndex < item.photoFiles.length - 1 &&
                <img src={right} className="bg-black bg-opacity-50 text-white p-2 cursor-pointer rounded-full w-10 mr-3" onClick={nextSlide} />}
            </div>
            <div className="flex justify-center mt-2">
              {item.photoFiles.map((i, index) => (
                <img
                  key={index}
                  src={i.url}
                  className={`${currentIndex === index ? 'border-blue-500 border-2' : ''} w-10 h-10 object-cover mx-1 rounded-md cursor-pointer transition-transform transform hover:scale-110`}
                  onClick={() => showMedia(index)}
                />
              ))}
            </div>
          </div>}

          <div className="flex-1 flex flex-col justify-center mt-2">
            <div className="mb-5">
              <div className='flex justify-between items-center mb-2 border-b-2 border-[#E3F2DF] pb-1'>
                <h2 className="text-2xl text-gray-800">{t('医院详情')}</h2>
                {item?.photoFiles?.length > 0 && <img src={item.photoFiles[0]?.url} alt="" className='w-14 h-14 rounded' />}
              </div>
              <div className="flex items-center mt-5">
                <div className="font-bold">🏥 {t('医院名称')}：</div>
                <div>{item.name}</div>
              </div>
              <div className="flex items-center mt-5">
                <div className="font-bold">🌍 {t('所在地')}：</div>
                <div>{item.location}</div>
              </div>
              <div className="flex items-center mt-5">
                <div className="font-bold">👊 {t('成功率')}：</div>
                <div>{item.successPercent}</div>
              </div>
              {token && <div className="flex items-center mt-5">
                <div className="font-bold">🪙 {t('价格')}：</div>
                <div>{item.price}</div>
              </div>}
              <div className=' border-b-2 border-[#E3F2DF] mt-1'></div>
              <div className="flex items-center mt-5">
                <div className="font-bold">🍑 {t('优势')}：</div>
                <div>{item.advantage}</div>
              </div>
              <div className="flex items-center mt-5">
                <div className="font-bold">📧 {t('简介')}：</div>
                <div>{item.detail}</div>
              </div>
              {item?.videoFiles?.length > 0 && <div>
                <div className=' border-b-2 border-[#E3F2DF] mt-1 mb-5'></div>
                <div className="flex items-center mt-5 mb-3">
                  <div className="font-bold">{t('视频简介')}</div>
                </div>
                <video className='bg-black w-full h-[300px]' controls>
                  <source src={item.videoFiles[0].url} type="video/mp4" />
                </video>
              </div>}

            </div>
          </div>
        </div>
      </div>
      <Footter />
      <Service />
      <Login show={showLogin} onEvent={onCloseLogin} />
    </>
  );
};

export default Detail;
